import React, {useState, memo} from 'react';

const MyPureComponent = memo(function MyPureComponent(props) {
    console.log('MyPureComponent 渲染');
    return <div>{props.value}</div>;
});

const App = () => {
    /**
     * 纯组件（Pure Component）
     * 一种性能优化手段，用于减少不必要的渲染，从而提高应用的性能。(自动对 props 和 state 进行浅比较)
     * 通过浅比较（shallow comparison）来决定是否需要重新渲染，
     * 避免在 props 或 state 没有变化时触发渲染。
     * 作用：
     *  避免不必要的渲染，提升性能。
     *  适用于 props 和 state 变化较少的组件。
     */


    /**
     * 浅比较:
     * 浅比较是指只比较对象的第一层属性，而不会递归比较嵌套的对象或数组。
     * 通过浅比较（shallow comparison）来决定是否需要重新渲染，
     * const obj1 = { a: 1, b: { c: 2 } };
     * const obj2 = { a: 1, b: { c: 2 } };
     * 浅比较结果：false，因为 b 是嵌套对象
     */

    const [value, setValue] = useState(1);

    const handleClick = () => {
        setValue(1); // 相同的值，不会触发重新渲染
    };

    return (
        <div>
            <MyPureComponent value={value}/>
            <button onClick={handleClick}>点击</button>
        </div>
    );
}

export default App;